<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>沧海的雨季</title>
    <meta name="description" content="记录日常所得">


    <link rel="preload" href="/blog/assets/css/0.styles.115a353e.css" as="style">
    <link rel="preload" href="/blog/assets/js/app.de985580.js" as="script">
    <link rel="preload" href="/blog/assets/js/5.a9792478.js" as="script">
    <link rel="prefetch" href="/blog/assets/js/10.350f3f7a.js">
    <link rel="prefetch" href="/blog/assets/js/11.99a758ce.js">
    <link rel="prefetch" href="/blog/assets/js/12.b4cdc581.js">
    <link rel="prefetch" href="/blog/assets/js/13.71e62645.js">
    <link rel="prefetch" href="/blog/assets/js/14.a5bcdaec.js">
    <link rel="prefetch" href="/blog/assets/js/15.a5d00ee4.js">
    <link rel="prefetch" href="/blog/assets/js/16.7bd0913b.js">
    <link rel="prefetch" href="/blog/assets/js/17.b40b4283.js">
    <link rel="prefetch" href="/blog/assets/js/18.2158de0b.js">
    <link rel="prefetch" href="/blog/assets/js/19.561e0424.js">
    <link rel="prefetch" href="/blog/assets/js/2.04aaa734.js">
    <link rel="prefetch" href="/blog/assets/js/20.86f56a92.js">
    <link rel="prefetch" href="/blog/assets/js/21.903bcdae.js">
    <link rel="prefetch" href="/blog/assets/js/22.b66137cc.js">
    <link rel="prefetch" href="/blog/assets/js/23.70efced9.js">
    <link rel="prefetch" href="/blog/assets/js/24.8950e520.js">
    <link rel="prefetch" href="/blog/assets/js/25.39c6c673.js">
    <link rel="prefetch" href="/blog/assets/js/26.42b3bd91.js">
    <link rel="prefetch" href="/blog/assets/js/27.5c7dd3fe.js">
    <link rel="prefetch" href="/blog/assets/js/28.22259a68.js">
    <link rel="prefetch" href="/blog/assets/js/3.08af6d6e.js">
    <link rel="prefetch" href="/blog/assets/js/4.865722e1.js">
    <link rel="prefetch" href="/blog/assets/js/6.f3345864.js">
    <link rel="prefetch" href="/blog/assets/js/7.94790f66.js">
    <link rel="prefetch" href="/blog/assets/js/8.ffb6af41.js">
    <link rel="prefetch" href="/blog/assets/js/9.405241a9.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.115a353e.css">
</head>
<body>
<div id="app" data-server-rendered="true">
    <div class="theme-container">
        <header class="navbar">
            <div class="sidebar-button">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"
                     class="icon">
                    <path fill="currentColor"
                          d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path>
                </svg>
            </div>
            <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">沧海的雨季</span></a>
            <div class="links" style="max-width:nullpx;">
                <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value="">
                    <!----></div>
                <nav class="nav-links can-hide">
                    <div class="nav-item"><a href="/blog/前端笔记/学习笔记/" class="nav-link">学习笔记</a></div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">面试题库</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/面试题库/基础面试题.html"
                                                                     class="nav-link">基础面试</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/面试题库/Vue.html" class="nav-link">Vue常考面试题</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">CSS</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/CSS/css常用代码/" class="nav-link">代码片段</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/CSS/stylus/"
                                                                     class="nav-link">stylus</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">JavaScript</span>
                            <span class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/常用代码/"
                                                                     class="nav-link">代码片段</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/技巧/"
                                                                     class="nav-link">JS技巧</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/JavaScript高级程序设计/"
                                                                     class="nav-link">JavaScript高级程序设计</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/ES6/" class="nav-link">深入理解ES6</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/JavaScript/正则表达式/" class="nav-link">正则表达式</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Vue</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/vue/vue使用/" class="nav-link">Vue使用</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/vue/vue技巧/" class="nav-link">Vue技巧</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">小程序</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/小程序/" class="nav-link">小程序</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">前端工具</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/前端工具/git/" class="nav-link">Git</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/前端工具/webpack/"
                                                                     class="nav-link">webpack</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/前端工具/chrome调试/" class="nav-link">chrome调试</a>
                                </li>
                                <li class="dropdown-item"><!----> <a href="/blog/前端工具/linux命令/"
                                                                     class="nav-link">linux命令</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">TypeScript</span>
                            <span class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a href="/blog/TypeScript/" class="nav-link">TypeScript</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Node.js</span> <span
                                class="arrow right"></span></a>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><!----> <a
                                        href="/blog/Node.js/Node.js从零开发Web Server博客项目 前端晋升全栈工程师必备/" class="nav-link">Node.js从零开发Web
                                    Server博客项目</a></li>
                                <li class="dropdown-item"><!----> <a
                                        href="/blog/Node.js/Node.js+KOA2 从0到1打造超好用Web框架一步到位 掌握KOA2服务端开发/"
                                        class="nav-link">Node.js+KOA2 从0到1打造超好用Web框架一步到位</a></li>
                                <li class="dropdown-item"><!----> <a href="/blog/Node.js/Vue全家桶+SSR+Koa2全栈开发美团网/"
                                                                     class="nav-link">Vue全家桶+SSR+Koa2全栈开发美团网</a></li>
                            </ul>
                        </div>
                    </div>
                    <a href="https://gitee.com/l544402029/blog" target="_blank" rel="noopener noreferrer"
                       class="repo-link">
                        Github
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100"
                             width="15" height="15" class="icon outbound">
                            <path fill="currentColor"
                                  d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                            <polygon fill="currentColor"
                                     points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                        </svg>
                    </a></nav>
            </div>
        </header>
        <div class="sidebar-mask"></div>
        <div class="sidebar">
            <nav class="nav-links">
                <div class="nav-item"><a href="/blog/前端笔记/学习笔记/" class="nav-link">学习笔记</a></div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">面试题库</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/面试题库/基础面试题.html" class="nav-link">基础面试</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/面试题库/Vue.html"
                                                                 class="nav-link">Vue常考面试题</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">CSS</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/CSS/css常用代码/" class="nav-link">代码片段</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/CSS/stylus/" class="nav-link">stylus</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">JavaScript</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/常用代码/" class="nav-link">代码片段</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/技巧/" class="nav-link">JS技巧</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/JavaScript高级程序设计/"
                                                                 class="nav-link">JavaScript高级程序设计</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/ES6/"
                                                                 class="nav-link">深入理解ES6</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/JavaScript/正则表达式/"
                                                                 class="nav-link">正则表达式</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Vue</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/vue/vue使用/" class="nav-link">Vue使用</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/vue/vue技巧/" class="nav-link">Vue技巧</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">小程序</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/小程序/" class="nav-link">小程序</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">前端工具</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/前端工具/git/" class="nav-link">Git</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/前端工具/webpack/" class="nav-link">webpack</a>
                            </li>
                            <li class="dropdown-item"><!----> <a href="/blog/前端工具/chrome调试/"
                                                                 class="nav-link">chrome调试</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/前端工具/linux命令/" class="nav-link">linux命令</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">TypeScript</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a href="/blog/TypeScript/"
                                                                 class="nav-link">TypeScript</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item">
                    <div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Node.js</span> <span
                            class="arrow right"></span></a>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><!----> <a
                                    href="/blog/Node.js/Node.js从零开发Web Server博客项目 前端晋升全栈工程师必备/" class="nav-link">Node.js从零开发Web
                                Server博客项目</a></li>
                            <li class="dropdown-item"><!----> <a
                                    href="/blog/Node.js/Node.js+KOA2 从0到1打造超好用Web框架一步到位 掌握KOA2服务端开发/" class="nav-link">Node.js+KOA2
                                从0到1打造超好用Web框架一步到位</a></li>
                            <li class="dropdown-item"><!----> <a href="/blog/Node.js/Vue全家桶+SSR+Koa2全栈开发美团网/"
                                                                 class="nav-link">Vue全家桶+SSR+Koa2全栈开发美团网</a></li>
                        </ul>
                    </div>
                </div>
                <a href="https://gitee.com/l544402029/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
                    Github
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100"
                         width="15" height="15" class="icon outbound">
                        <path fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                        <polygon fill="currentColor"
                                 points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                    </svg>
                </a></nav>
            <ul class="sidebar-links">
                <li>
                    <div class="sidebar-group first"><p class="sidebar-heading open"><span></span> <!----></p>
                        <ul class="sidebar-group-items"></ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="page">
            <div class="content"></div>
            <div class="page-edit">
                <div class="edit-link"><a href="https://gitee.com/l544402029/blog/edit/gh-pages/CSS/css常用技巧/README.md"
                                          target="_blank" rel="noopener noreferrer">编辑此页</a>
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100"
                         width="15" height="15" class="icon outbound">
                        <path fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                        <polygon fill="currentColor"
                                 points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                    </svg>
                </div> <!----></div> <!----> </div> <!----></div>
</div>
<script src="/blog/assets/js/app.de985580.js" defer></script>
<script src="/blog/assets/js/5.a9792478.js" defer></script>
</body>
</html>
